/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';

import {
    Card,
    Row,
    Col,
    Button,
    Tag,
    Spin,
} from 'antd';

import PageHearder from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
    addTab,
    getPageQuery,
} from '@/utils/utils';

import { authInfoList } from '../config/constant';

import '@ant-design/compatible/assets/index.css';

interface consumeDetailProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    courierRecharge: any;
    loading: boolean;
    dataInfo: any;
    cabinetCount: number;
    oldShelfCount: number;
    newShelfCount: number;
    currentUser: any;
}

@connect(({
    loading,
    user: { currentUser },
    tencentImpower: { dataInfo, cabinetCount, oldShelfCount, newShelfCount },
}: any) => ({
    dataInfo,
    cabinetCount,
    oldShelfCount,
    newShelfCount,
    currentUser,
    loading: loading.effects['tencentImpower/fetchDetail'],
}))
class TencentImpowerElem extends Component<consumeDetailProps> {
    componentDidMount() {
        this.callbackImpower();
    }

    componentDidUpdate(prevProps: any, prevState: any) {
        const { dataInfo } = this.props;
        if (!_.isEqual(dataInfo, prevProps.dataInfo)) {
            if (dataInfo.id) {
                const { dispatch } = this.props;
                dispatch({ type: 'tencentImpower/fetchCabinetCount', payload: { type: 1 } });
                dispatch({ type: 'tencentImpower/fetchCabinetCount', payload: { type: 2 } });
                dispatch({ type: 'tencentImpower/fetchCabinetCount', payload: { type: 3 } });
            }
        }
    }

    // 获取公众号详情
    fetchDetail = () => {
        const { dispatch } = this.props;
        dispatch({ type: 'tencentImpower/fetchDetail' });
    };

    // 获取预授权码
    fetchImpower = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'tencentImpower/fetchImpower',
        }).then((res: any) => {
            if (res) {
                if (res) {
                    const { componentAppid, preAuthCode } = res.body;
                    const redirect_uri = window.location.href;

                    window.location.href = `https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=${componentAppid}&pre_auth_code=${preAuthCode}&redirect_uri=${redirect_uri}`;
                }
            }
        });
    };

    // 授权回调
    callbackImpower = () => {
        const { dispatch } = this.props;
        const { auth_code: authCode, expires_in: expiresIn } = getPageQuery();

        if (authCode && expiresIn) {
            dispatch({
                type: 'tencentImpower/fetchCallback',
                payload: { authCode, expiresIn },
            }).then((res: any) => {
                this.fetchDetail();

                addTab(dispatch, {
                    name: '授权公众号',
                    url: '/tencent/impower',
                });
            });
        } else {
            this.fetchDetail();
        }
    };

    // 跳转模块
    jumpModel = (value: number, name: string) => {
        const { dispatch } = this.props;
        addTab(dispatch, {
            name,
            url: `/tencent/impower/config?tab=${value}`,
        });
    };

    render() {
        const {
            dataInfo,
            loading,
            cabinetCount,
            oldShelfCount,
            newShelfCount,
        } = this.props;

        return (
            <>
                <PageHearder />

                <Spin spinning={loading}>
                    {
                        dataInfo.id === false && (
                            <Card bordered={false} title="公众号授权信息">
                                <Row>
                                    点击下方授权按钮，立即将您的公众号授权于
                                    <span style={{ color: '#1890ff' }}>中科富创正式开发平台</span>
                                </Row>
                                <Row>
                                    平台将会获取您以下的权限（若取消以下授权会造成部分功能缺失，微信平台已自动勾选，直接点击授权即可）
                                </Row>
                                <div
                                    style={{
                                        margin: '20px 0',
                                        background: '#eee',
                                        padding: '0 20px',
                                    }}
                                >
                                    <Row gutter={12} style={{ padding: '20px 0' }}>
                                        {
                                            Object.keys(authInfoList).map((item: any) => (
                                                <Col md={6} sm={24} key={item} style={{ margin: '6px 0' }}>
                                                    <span
                                                        style={{
                                                            width: '10px',
                                                            height: '10px',
                                                            display: 'inline-block',
                                                            borderRadius: '50%',
                                                            background: '#ccc',
                                                            marginRight: '10px',
                                                        }}
                                                    />
                                                    {authInfoList[item]}
                                                </Col>
                                            ))
                                        }
                                    </Row>
                                </div>
                                <div>
                                    <Button
                                        size="large"
                                        style={{
                                            background: '#04BE02',
                                            color: '#fff',
                                            borderRadius: '5px',
                                            width: '300px',
                                            display: 'block',
                                            margin: '0 auto',
                                        }}
                                        onClick={this.fetchImpower}
                                    >
                                        微信公众号授权
                                    </Button>
                                </div>
                            </Card>
                        )
                    }

                    {
                        dataInfo.id && (
                            <Card bordered={false} title="已授权公众号信息">
                                <Card style={{ width: '500px' }}>
                                    <Row>
                                        <Col>
                                            <img
                                                src={
                                                    dataInfo.headImg || 'https://cdn2.jinlb.cn/pic/c7/b3/c7b305c13cfe4d575e6f6b29785c4877.jpg'
                                                }
                                                style={{
                                                    width: '200px',
                                                    height: '200px',
                                                    cursor: 'pointer',
                                                    border: '1px solid #eee',
                                                }}
                                                alt=""
                                                onClick={() => this.jumpModel(1, '用户概况')}
                                            />
                                        </Col>
                                        <Col md={2} sm={2} />
                                        <Col style={{ cursor: 'pointer' }} onClick={() => this.jumpModel(1, '用户概况')}>
                                            <span style={{ display: 'block', marginTop: '30px', marginBottom: '10px' }}>
                                                {dataInfo.nickName}
                                            </span>
                                            <Tag color="blue">公众号</Tag>
                                        </Col>
                                    </Row>
                                    <Row style={{ marginTop: '20px' }}>
                                        <Col
                                            style={{ width: '120px', cursor: 'pointer' }}
                                            onClick={() => this.jumpModel(2, '绑定柜体')}
                                        >
                                            <span style={{ display: 'block', lineHeight: '26px' }}>{cabinetCount}</span>
                                            <span style={{ display: 'block' }}>绑定柜体</span>
                                        </Col>
                                        <Col
                                            style={{ width: '120px', cursor: 'pointer' }}
                                            onClick={() => this.jumpModel(4, '绑定旧货架')}
                                        >
                                            <span style={{ display: 'block', lineHeight: '26px' }}>{oldShelfCount}</span>
                                            <span style={{ display: 'block' }}>绑定旧货架</span>
                                        </Col>
                                        <Col
                                            style={{ width: '120px', cursor: 'pointer' }}
                                            onClick={() => this.jumpModel(5, '绑定新货架')}
                                        >
                                            <span style={{ display: 'block', lineHeight: '26px' }}>{newShelfCount}</span>
                                            <span style={{ display: 'block' }}>绑定新货架</span>
                                        </Col>
                                        <Col md={2} sm={2} />
                                        <Col>
                                            <span style={{ display: 'block', height: '26px' }} />
                                            <span
                                                style={{ display: 'block', color: '#1890ff', cursor: 'pointer' }}
                                                onClick={() => this.jumpModel(3, '公众号配置')}
                                            >
                                                公众号已配置，前往修改&gt;
                                            </span>
                                        </Col>
                                    </Row>
                                </Card>
                            </Card>
                        )
                    }
                </Spin>
            </>
        );
    }
}

export default TencentImpowerElem;
